<template>
  <el-container class="container">
    <el-header class="header">
      <img src="../assets/images/HOME.png" alt="" />
      <span>后台管理</span>
      <el-button type="info" @click="logout">退出</el-button>
    </el-header>

    <el-container >
      <el-aside class="aside menu" :width="isCollapse ? '64px' : '200px'" >
        <div class="toggle-button" @click="toggleCollapse">|||</div>
        <el-menu
          background-color="#333744"
          text-color="#fff"
          active-text-color="#ffd04b"
          unique-opened
          :collapse="isCollapse"
          :collapse-transition="false"
          router
          :default-active="this.$route.path"
          
        >
          <el-submenu
            :index="item.id.toString()"
            v-for="item in menulist"
            :key="item.id"
          >
            <!--            一级菜单-->
            <template slot="title">
              <i :class="iconObj[item.id]"></i>
              <span>{{ item.authName }}</span>
            </template>

            <!--            二级菜单-->
            <el-menu-item
              :index="'/' + subItem.path"
              v-for="subItem in item.children"
              :key="subItem.id"
            >
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>{{ subItem.authName }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import {mapMutations} from 'vuex'
export default {
  data() {
    return {
      websock:null,
      menulist: [
        {
          authName: "状态",
          id: 103,
          order: 1,
          path: "state",
          children: [
            {
              id:111,
              authName:"概览",
              path:"overview"
            },
            { id: 110,
              authName: "防火墙", 
              path: "state" 
            },
            {
              id:112,
              authName:"路由表",
              path:"routerTable"
            },
            {
              id:113,
              authName:"系统日志",
              path:"systemLog"
            },
            {
              id:114,
              authName:"内核日志",
              path:"coreLog"
            },
            {
              id:115,
              authName:"系统进程",
              path:"systemProcess"
            },
            {
              id:116,
              authName:"实时信息",
              path:"information"
            },
            {
              id:117,
              authName:"实时监控",
              path:"monitor"
            },
          ],
        },
        {
          authName: "系统",
          id: 125,
          order: 1,
          path: "system",
          children: [
            { id: 160, 
              authName: "系统属性", 
              path: "system" 
            },
            {
              id:161,
              authName:"web管理",
              path:"webManage"
            },
            {
              id:162,
              authName:"管理权",
              path:"managementPower"
            },
            {
              id:163,
              authName:"TTYD终端",
              path:"TTYD"
            },
            {
              id:164,
              authName:"软件包",
              path:"softwarePackage"
            },
            {
              id:165,
              authName:"启动项",
              path:"startupItem"
            },
            {
              id:166,
              authName:"磁盘管理",
              path:"diskManage"
            },
            {
              id:167,
              authName:"备份/升级",
              path:"backups"
            },
            {
              id:168,
              authName:"重启",
              path:"restart"
            },
          ],
        },
        {
          authName: "VPN",
          id: 170,
          order: 1,
          path: "vpnServer",
          children: [
            {
              id: 171,
              authName: "SoftEther VPN 服务器",
              path: "SoftEther",
            },
            {
              id: 172,
              authName: "OpenVPN Server",
              path: "OpenVPN",
            },
            {
              id: 173,
              authName: "IPSecVPN",
              path: "IPSecVPN",
            },
            {
              id: 174,
              authName: "Zero Tier",
              path: "Zero Tier",
            },
          ],
        },
        {
          authName: "设置向导",
          id: 123,
          order: 1,
          path: "guide",
          children: [
            {
              id: 124,
              authName: "外网线路",
              path: "guide",
            },
          ],
        },
        
        {
          authName: "运行监控",
          id: 128,
          order: 1,
          path: "control",
          children: [
            // {
            //   id: 126,
            //   authName: "流量监控",
            //   path: "flowControl",
            // },
            // {
            //   id: 127,
            //   authName: "内存监控",
            //   path: "CPUControl",
            // },
            // {
            //   id: 128,
            //   authName: "地图监控",
            //   path: "MapControl",
            // },
            {
              id: 129,
              authName: "地图监控",
              path: "MapControl2",
            },
            {
              id: 134,
              authName: "实时监控",
              path: "AI_Monitor",

            },
          ],
          
        },
        {
          authName: "AI模块",
          id: 130,
          order: 1,
          path: "AI",
          children: [
            {
              id: 131,
              authName: "接口",
              path: "AI_Interface",
            },
            {
              id: 132,
              authName: "主机名",
              path: "AI_Name",
            },
            {
              id: 133,
              authName: "实时信息",
              path: "AI_Information",
            },
            
            {
              id:161,
              authName:"UI与AI模块数据通道",
              path:'Test1'
            },
            // {
            //   id:134,
            //   authName:'自编码器',
            //   path:''
            // },
            // {
            //   id:135,
            //   authName:'GAN',
            //   path:''
            // },
            // {
            //   id:Flow,
            //   authName:'Flow',
            //   path:''
            // }
          ],
        },
        {
          authName: "P4模块",
          id: 140,
          order: 1,
          path: "P4",
          children: [
            {
              id: 141,
              authName: "接口",
              path: "P4_Interface",
            },
            {
              id: 142,
              authName: "主机名",
              path: "P4_Name",
            },
            {
              id: 143,
              authName: "实时信息",
              path: "P4_Information",
            },
            {
              id: 144,
              authName: "实时监控",
              path: "P4_Monitor",
            },
            {
              id:145,
              authName:'UI和P4数据通道',
              path:'P4_Test1'
            }
          ],
        },
        {
          authName: "FPGA模块",
          id: 150,
          order: 1,
          path: "FPGA",
          children: [
            {
              id: 151,
              authName: "接口",
              path: "FPGA_Interface",
            },
            {
              id: 152,
              authName: "主机名",
              path: "FPGA_Name",
            },
            {
              id: 153,
              authName: "实时信息",
              path: "FPGA_Information",
            },
            {
              id: 154,
              authName: "实时监控",
              path: "FPGA_Monitor",
            }
          ],
        },
        {
          authName:"任务(以入侵场景检测为例)",
          id:160,
          order:1,
          path:'test',
          children:[
            {
              id:163,
              authName:'学习任务',
              path:'Test3'
            },
            {
              id:162,
              authName:'推理任务',
              path:'Test2'
            },
            {
              id:163,
              authName:'111',
              path:"111"
            }
            
          ]
        },
        // {
        //   authName:"设置向导",id:123,order:1,path:"Network",children:[
        //     {
        //       id:124,
        //       authName:"外网线路",
        //       path:"Network"
        //     },

        //   ]
        // }
        {
          authName:"预想模块",
          id:190,
          path:"Anticipate",
          children:[
            {
              id:191,
              authName:'多条路由检测',
              path:'Multi-Hop'
            },
            {
              id:164,
              authName:'负载均衡',
              path:'LoadBalancing'
            },
            {
              id:165,
              authName:'源地址路由验证',
              path:'SourceRoutingIdenify'
            },
            {
              id:166,
              authName:'基础ipv4转发',
              path:'BasicForwarding'
            },
            {
              id:167,
              authName:'隧道',
              path:'BasicTunneling'
            },
            {
              id:168,
              authName:'控制器',
              path:'P4Runtime'
            },
            {
              id:169,
              authName:'显示拥塞通知',
              path:'ExplicitCongestionNotification'
            },
            {
              id:170,
              authName:'计数',
              path:'Calculator'
            },
            {
              id:171,
              authName:'服务质量',
              path:'QualityOfService'
            },
            {
              id:172,
              authName:'防火墙',
              path:'Firewall'
            },
            {
              id:173,
              authName:'链路监控',
              path:'LinkMonitoring'
            },
            {
              id:174,
              authName:'GAN',
              path:'GAN'
            },
            {
              id:175,
              authName:'Flow',
              path:'Flow'
            },
            {
              id:176,
              authName:'自编码器',
              path:'SinceTheEncoder'
            },
          ]
        }
      ],
      iconObj: {
        125: "iconfont icon-user",
        103: "iconfont icon-tijikongjian",
        101: "iconfont icon-shangpin",
        102: "iconfont icon-danju",
        145: "iconfont icon-baobiao",
        123: "iconfont icon-danju",
        124: "iconfont icon-shangpin",
        128: "iconfont icon-shangpin",
        130: "iconfont icon-shangpin",
        140: "iconfont icon-shangpin",
        150: "iconfont icon-shangpin",
        160: "iconfont icon-shangpin",
        170: "iconfont icon-shangpin",
        190: "iconfont icon-shangpin",
      },
      isCollapse: false,
    };
  },
  created() {
     this.initWebSocket()
  },
  methods: {
    ...mapMutations(['saveSessionId','saveData']),
     initWebSocket(){ //初始化weosocket
        // const wsuri = "ws://42d74x4037.wocp.fun/ws";
        const wsuri = "ws://47.106.71.32:8080/ws";
        this.websock = new WebSocket(wsuri);
        this.websock.onopen = this.websocketOnopen;
        this.websock.onerror = this.websocketOnerror;
        this.websock.onmessage = this.websocketOnmessage;
        this.websock.onclose = this.websocketOnclose;
     },
      websocketonerror(){//连接建立失败重连
        this.initWebSocket();
      },
      websocketOnopen: function () {
        console.log("WebSocket连接成功");
      },
      websocketOnerror: function (e) {
        console.log("WebSocket连接发生错误");
        this.reconnect();
      },
      websocketOnmessage: function (e) {
      	 
        // var data2 = eval("(" + e.data + ")"); //解析对象
        var data = JSON.parse(e.data)
        console.log(data);
        if(data.type == 'PCAP'){
          // console.log(data.data);
        }

        if(e.data.length <= 3){
          var data = e.data
        }else{
          var data = JSON.parse(e.data)
        }
        // console.log(data);
        // console.log(e);
        if(e.data.length <= 3){
          this.saveSessionId(e.data)
          // console.log(e)
        }else{
          this.saveData(data)
        }
        
      },
      websocketOnclose: function (e) {
        console.log("connection closed (" + e.code + ")");
        this.reconnect();
      },
      websocketSend(text) { // 数据发送
        try {
          this.websock.send(text);
        } catch (err) {
          console.log("send failed (" + err.code + ")");
        }
      },
    logout() {
      console.log("....");
      window.sessionStorage.clear();
      this.$router.push("./login");
    },
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  height: 100%;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #404040;

  > img {
    height: 80%;
  }

  span {
    color: white;
    font-size: 20px;
    position: absolute;
    left: 80px;
  }
}

.main {
  background-color: #0086b3;
}
.menu{
   width: 252px !important; 
}
.aside {
  background-color: #333744;

  .el-menu {
    border-right: none;
  }
}

.iconfont {
  margin-right: 10px;
}

.toggle-button {
  background-color: #4a5064;
  font-size: 10px;
  line-height: 24px;
  color: white;
  letter-spacing: 0.2em;
  text-align: center;
  cursor: pointer;
}
</style>